<script setup lang="ts">
const $props = defineProps({
  radioName: { type: String, default: '' },
  tag: { type: Boolean, default: false },
  // 展示右侧信息
  radioMsg: { type: Boolean, default: true },
  groupValue: { type: String, required: true },
  // 优惠折扣
  discountAmount: { type: [String, Number], default: '0' },
  // 优惠类型
  discountName: {
    type: String,
    default: '无门槛折扣',
  },
})
const emit = defineEmits(['update:groupValue'])
const { divTenThousand } = useConvert()
</script>

<template>
  <view class="reduction">
    <view class="reduction--describe">
      <slot>
        <text>{{ discountName }}</text>
        <u-tag v-if="$props.tag" :text="discountName" type="error" mode="plain" size="mini" class="reduction__tag" />
      </slot>
    </view>
    <view class="radio-box" @click="emit('update:groupValue', $props.radioName)">
      <template v-if="$props.radioMsg">
        <text class="reduction--price">减</text>
        <text style="font-size: 34rpx; font-weight: Bold; color: #f83f30; margin-right: 15rpx">
          {{ discountAmount && divTenThousand(discountAmount) }}
        </text>
      </template>
      <radio :value="$props.radioName" :checked="$props.radioName === $props.groupValue" color="red" style="transform: scale(0.7)" />
    </view>
  </view>
</template>

<style scoped lang="scss">
@include b(reduction) {
  padding: 20rpx;
  padding-right: 0;
  width: 100vw;
  @include flex;
  justify-content: space-between;
  @include e(tag) {
    transform: scale(0.7);
  }
  @include m(describe) {
    font-size: 30rpx;
    font-weight: Bold;
    color: #000000;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  }
  @include m(price) {
    font-size: 28rpx;
    font-weight: Bold;
    color: #f83f30;
    & ::after {
      content: '￥';
      font-size: 24rpx;
      font-weight: Bold;
      color: #f83f30;
    }
  }
}
@include b(radio-box) {
  @include flex;
  margin-right: 20rpx;
}
</style>
